import React from "react";

export default class ListPanel extends React.Component{
  constructor(props){
    super(props);
    this.state={};
    this.state.list = this.props.list;
  }

  changed(list){
    this.setState({list});
  }

  selected(id){
    const list = this.state.list;
    for(let i=0;i<list.length;i++){
      if(list[i].id===id){
        list[i].selected=!list[i].selected;
      }
    }
    this.setState({list});
  }

  render(){

    const lis = this.state.list.map(item=><li className={item.selected?"selected":""} key={item.id} onClick={()=>this.selected(item.id)}>{item.content}</li>)
    return<ul>
      {lis}
    </ul>
  }
}
